import React, { useEffect, useState } from "react";
import { MyNavBar } from "../../../components";
import { useNavigate } from "react-router-dom";
import style from "./style.module.scss";
import bankCard from "../../../assets/images/image/hdpi/bank_card.png";
import { getHttp } from "../../../api";
import { stringify } from "querystring";
import { dateFormat, getTimeFromDate } from "../../../utils/formatTime";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [info, setInfo] = useState({
    bankCardNumber: "",
    bankCardType: 1,
    bankName: "",
    bindTime: 1,
    userId: 1,
  });
  const getBannersList = () => {
    getHttp("/health/user/verify/v1/findUserBankCardByUserId").then((resp) => {
      console.log(resp);
      setInfo(resp.result)
    });
  };

  useEffect(() => {
    getBannersList();
  }, []);
  return (
    <div className={style.viewBankCards}>
      <MyNavBar
        title="查看银行卡信息"
        style={{ background: "#fff" }}
        onClickLeft={() => navigate("/set/person/infomation")}
      ></MyNavBar>
      <div className={style.viewBankCards_container}>
        <div className={style.viewBankCards_box}>
          <img src={bankCard} alt="" />
          <div className={style.bankCards}>
            <div className={style.bank}>{info.bankName}</div>
            <div className={style.type}>{info.bankCardType === 1 ? '储蓄卡': '信用卡'}</div>
            <div className={style.card}>{info.bankCardNumber}</div>
            <div className={style.time_box}>
              <div></div>
              <div>绑卡时间：{getTimeFromDate(info.bindTime)}</div>
            </div>
          </div>
        </div>
        <button
          className={style.btn}
          onClick={() => navigate("/set/bind/bank/card")}
        >
          更换绑定
        </button>
      </div>
    </div>
  );
};

export default Index;
